HTML কি?
HTML (HyperText Markup Language) হল ওয়েব পেজ তৈরি এবং ডিজাইন করার জন্য ব্যবহৃত মৌলিক মার্কআপ ভাষা। এটি একটি স্ট্যান্ডার্ড মার্কআপ ল্যাঙ্গুয়েজ যা ওয়েব পেজের কাঠামো নির্ধারণ করে। HTML মূলত ব্রাউজারকে বলে দেয় যে একটি ওয়েব পেজে কি ধরনের কন্টেন্ট থাকবে (যেমন: টেক্সট, ছবি, লিঙ্ক, টেবিল) এবং সেগুলোর সাথে কীভাবে আচরণ করতে হবে।
HTML কোডের মধ্যে ট্যাগ (Tags) ব্যবহার করা হয়, যেগুলি ব্রাউজারকে নির্দেশ দেয় যে একটি নির্দিষ্ট কন্টেন্ট কিভাবে প্রদর্শিত হবে।
HTML এর মৌলিক কাঠামো
একটি HTML পৃষ্ঠা সাধারণত কিছু নির্দিষ্ট মৌলিক অংশ নিয়ে তৈরি হয়:
<!DOCTYPE html>: এই ট্যাগটি ব্রাউজারকে বলে দেয় যে এটি একটি HTML5 ডকুমেন্ট।<html>: HTML ডকুমেন্টের শুরু এবং শেষ নির্দেশ করে।<head>: এই অংশে পেজের মেটা তথ্য, স্টাইল শিট, স্ক্রিপ্ট এবং অন্যান্য রিসোর্স থাকে।<body>: এই অংশে ওয়েব পেজের দৃশ্যমান কন্টেন্ট থাকে, যেমন টেক্সট, ছবি, টেবিল ইত্যাদি।
এখানে একটি সাধারণ HTML ডকুমেন্টের উদাহরণ দেওয়া হল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is my first HTML page.</p>
</body>
</html>
HTML সিনট্যাক্স
HTML ডকুমেন্টের মধ্যে ব্যবহারকারী বিভিন্ন ট্যাগ ব্যবহার করে কন্টেন্ট সাজায়। প্রতিটি HTML ট্যাগের কিছু মৌলিক সিনট্যাক্স থাকে:
- ট্যাগের স্ট্রাকচার: HTML ট্যাগগুলি সাধারণত
<tagname>content</tagname>এর মতো থাকে, যেখানে:<tagname>: এটি একটি HTML ট্যাগ (যেমন<h1>,<p>,<a>ইত্যাদি)।content: এই অংশে আপনার পৃষ্ঠার কন্টেন্ট থাকে, যা ট্যাগের ভিতরে প্রদর্শিত হবে।
- Self-closing ট্যাগ: কিছু HTML ট্যাগ আছে, যেগুলি কন্টেন্ট ধারণ করে না এবং নিজেই বন্ধ হয়ে যায়, যেমন:
<img>: ছবি প্রদর্শন করার জন্য।<br>: নতুন লাইনে যাওয়ার জন্য (line break)।<hr>: অনুভূমিক রেখা (horizontal rule) তৈরি করতে।
<img src="image.jpg" alt="Description of image">
<br>
<hr>
HTML এর মৌলিক ট্যাগ
এখানে HTML এর কিছু মৌলিক এবং গুরুত্বপূর্ণ ট্যাগ সম্পর্কে আলোচনা করা হলো:
<h1>থেকে<h6>: হেডিং ট্যাগগুলি ওয়েব পেজের টাইটেল বা হেডিং তৈরি করে।<h1>হল সবচেয়ে বড় হেডিং এবং<h6>সবচেয়ে ছোট হেডিং।<h1>This is a heading 1</h1> <h2>This is a heading 2</h2><p>: প্যারা (paragraph) ট্যাগ, যা একটি সাধারণ প্যারাগ্রাফ তৈরি করে।<p>This is a paragraph of text.</p><a>: লিঙ্ক ট্যাগ, যা ব্যবহারকারীকে অন্য পেজে নিয়ে যায় বা একটি ওয়েব পেজের অংশে স্ক্রল করে নিয়ে যায়।<a href="https://www.example.com">Visit Example</a><ul>এবং<ol>: আনঅর্ডার্ড (unordered) এবং অর্ডারড (ordered) লিস্ট তৈরি করার জন্য ব্যবহৃত হয়।<ul>: অর্ডারহীন তালিকা।<ol>: অর্ডারযুক্ত তালিকা।
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol><img>: ছবি ইনসার্ট করার জন্য ব্যবহৃত হয়। এটি সেলফ-ক্লোজিং ট্যাগ।<img src="image.jpg" alt="An example image"><table>: টেবিল তৈরি করার জন্য ব্যবহৃত হয়। টেবিলের মধ্যে<tr>,<td>, এবং<th>ট্যাগ ব্যবহৃত হয়।<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table><form>: ব্যবহারকারীর ইনপুট সংগ্রহ করতে ফর্ম ব্যবহৃত হয়।<form action="/submit" method="POST"> <input type="text" name="username"> <button type="submit">Submit</button> </form>
HTML এর মধ্যে মন্তব্য (Comments)
HTML এ মন্তব্য করার জন্য <!-- --> সাইন ব্যবহার করা হয়। মন্তব্য কোডের মধ্যে এমন টেক্সট থাকে যা ব্রাউজারে প্রদর্শিত হয় না, তবে ডেভেলপারদের জন্য কোডের ব্যাখ্যা বা নোট হিসেবে ব্যবহৃত হয়।
<!-- This is a comment in HTML -->
<p>This is a paragraph.</p>
HTML ডকুমেন্টের মেটা তথ্য
<head> ট্যাগের মধ্যে কিছু মেটা তথ্য যেমন ডকুমেন্টের শিরোনাম, কোডিং ফর্ম্যাট, এবং ব্রাউজার কম্প্যাটিবিলিটি সম্পর্কে তথ্য রাখা হয়।
<meta>: মেটা ট্যাগ ব্রাউজারের এবং সার্চ ইঞ্জিনের জন্য অতিরিক্ত তথ্য প্রদান করে।<title>: পৃষ্ঠার শিরোনাম।
<head>
<meta charset="UTF-8">
<meta name="description" content="This is a sample webpage">
<title>My Web Page</title>
</head>
উপসংহার
HTML হল ওয়েব পেজ তৈরি করার মৌলিক ভাষা। এর মাধ্যমে ওয়েব পৃষ্ঠার কাঠামো নির্মাণ করা হয়, যেমন টেক্সট, ছবি, লিঙ্ক এবং অন্যান্য উপাদানগুলি কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা হয়। HTML সিনট্যাক্স এবং ট্যাগগুলি শিখে ওয়েব ডেভেলপমেন্টের প্রথম পদক্ষেপ হিসেবে একটি সঠিক ও কার্যকরী ওয়েব পেজ তৈরি করা সম্ভব। HTML একটি সহজ ভাষা হলেও এর মূল ধারণা এবং সিনট্যাক্স শেখা খুবই গুরুত্বপূর্ণ, কারণ এটি সব ওয়েব ডেভেলপমেন্টের ভিত্তি।
Read more
